<template>
	<view class="content">
	
		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view 
				v-for="(item,index) in tabBars" :key="item.id"
				class="nav-item"
				:class="{on: index === tabCurrentIndex}"
				:id="'tab'+index"
				@click="changeTab(index,item.state)"
			>{{item.name}}</view>
		</scroll-view>
		
		<!-- 下拉刷新组件 -->
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">
			<!-- 内容部分 -->
			<swiper 
				id="swiper"
				class="swiper-box" 
				:duration="300" 
				:current="tabCurrentIndex"
				:disable-touch="true"
			>
				<swiper-item v-for="tabItem in tabBars" :key="tabItem.id">
					<scroll-view 
						class="panel-scroll-box" 
						:scroll-y="enableScroll" 
						@scrolltolower="loadMore"
						>
						<view class="order-list-box" v-if="tabItem.newsList.length>0">
							<view class="order-list" v-for="(item,index) in tabItem.newsList" :key="index">
								<view class="order-top">
									<view class="order-create-time f-one-ellipsis">订单号：{{item.order_no}}</view>
									<view class='order-status'>{{item.create_time}}</view>
								</view>
								
								<navigator open-type="navigate" hover-class="none" class="good" :url="'/pages/jewel/order/orderdetail?order_id='+item.id">
									<view class="lease-img">
										<image :src="item.goods_img"></image>
									</view>
									<view class="lease-info">
										<view class="lease-title">{{item.goods_name}}</view>
											<!-- <view class="lease-attr font-color-hs">{{item.item_names}}</view> -->
										<view class="lease-price">
											<view class="lease-num">x{{item.buy_num}}</view>
											<view class="lease-now">¥{{item.shop_price}}</view>
										</view>
									</view>
								</navigator>
								
								<view class="total-cont"><text>买家信息</text>共{{item.buy_num}}件商品，合计：¥{{item. pay_amount }}</view>
								
								<view class="buyer-info">
									<view class="buyer-info-item">
										<image src="../../../static/icons/store/icon_address.png" class="buyer-info-item-icon"></image>
										<view class="buyer-info-item-text f-two-ellipsis">
											地址：广东省佛山市禅城区华远东路13号华远商业大厦首层（广东恒朗科技有限公司）
										</view>
									</view>
									<view class="buyer-info-item">
										<image src="../../../static/icons/store/icon_tel.png" class="buyer-info-item-icon"></image>
										<view class="buyer-info-item-text buyer-info-item-tel">
											<view class="f-one-ellipsis">电话：18255888888  李雨菲</view>
											<view class="buyer-info-item-text-btn">发货</view>
										</view>
									</view>
								</view>
								
							</view>
						</view>
						
						<!-- 上滑加载更多组件 -->
						<mix-load-more :status="tabItem.loadMoreStatus" v-if="tabBars[tabCurrentIndex].newsList.length == 0 || tabBars[tabCurrentIndex].newsList.length > 10"></mix-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</mix-pulldown-refresh>
	</view>
</template>

<script>
	const tabData = [{
		name: '全部',
		id: '1',
		state: 1
	}, {
		name: '待付款',
		id: '2',
		state: 6
	}, {
		name: '未发货',
		id: '3',
		state: 3
	}, {
		name: '已发货',
		id: '4',
		state: 4
	}, {
		name: '退货处理',
		id: '5',
		state: 7
	}];
	import jewel from '@/common/common_zb.js';
	let windowWidth = 0, scrollTimer = false, tabBar, that;
	export default {
		data() {
			return {
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				page:1,
				totalPages:1,
				Consignation: [], // 寄存的时间
			}
		},
		mounted() {
			that = this
		},
		onLoad({tarBarType}) {
			let that = this
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			that.tabCurrentIndex = Number(tarBarType?tarBarType:0)
			this.loadTabbars();
			jewel.post('order/getConsign', {}, false, function(res) {
				that.Consignation = res.data.data;
			})
		},
		methods: {
			//获取分类
			loadTabbars(){
				let tabList = tabData;
				tabList.forEach(item=>{
					item.newsList = [];
					item.loadMoreStatus = 1;  //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
				})
				this.tabBars = tabList;
				this.loadNormal();
			},
			//tab切换
			async changeTab(e,state){
				if(e == this.tabCurrentIndex) return false
				if(scrollTimer){
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				
				//e=number为点击切换，e=object为swiper滑动切换
				// if(typeof e === 'object'){
				// 	index = e.detail.current
				// }
				if(typeof tabBar !== 'object'){
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0; 
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if(i === index){
						nowWidth = result.width;
					}
				}
				if(typeof e === 'number'){
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index; 
					this.tabBars[index].loadMoreStatus = 1
				}
				
				this.tabBars[this.tabCurrentIndex].newsList = []
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(()=>{
					if (width - nowWidth/2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth/2 - windowWidth / 2;
					}else{
						this.scrollLeft = 0;
					}
					this.tabCurrentIndex = index; 
					this.totalPages = 1
					this.loadNormal()
				}, 300)
				
			},
			// 获取订单列表
			loadNewsList(type){
				let that = this
				let tabItem = that.tabBars[that.tabCurrentIndex];
				if(type === 'add'){
					tabItem.loadMoreStatus = 1
				}
				// #ifdef APP-PLUS
				if(type === 'refresh'){
					tabItem.refreshing = true;
				}
				// #endif
				if(that.page <= that.totalPages){
					jewel.post('seller/get_order_list',{type:tabItem.state,page:that.page},true,function(res){
						if(res.data.code == 0){
							switch(type){
								case 'normal':
									tabItem.newsList = res.data.data
									tabItem.loadMoreStatus = res.data.count == 0? 4: 0;
									that.totalPages = res.data.total_pages
								break;
								case 'refresh':
									//下拉刷新 关闭刷新动画
									that.$refs.mixPulldownRefresh && that.$refs.mixPulldownRefresh.endPulldownRefresh();
									// #ifdef APP-PLUS
									tabItem.refreshing = false;
									// #endif
									
									tabItem.newsList = res.data.data
									that.totalPages = res.data.total_pages
									if(tabItem.newsList.length === 0) tabItem.loadMoreStatus = 2
								break;
								case 'add':
									tabItem.newsList = tabItem.newsList.concat(res.data.data)
									tabItem.loadMoreStatus = 0;
								break;
							}
						}
					})
				}else{
					tabItem.loadMoreStatus = 2
				}
			},
			// 取消寄存
			cancel_consignation(order_id, type) {
				let that = this;
				if (type == 1) {
					uni.showModal({
						title: '提示',
						content: '确认要取消寄存该订单吗',
						success: function(res) {
							if (res.confirm) {
								jewel.post('order/cancel_consignation', {
									order_id: order_id
								}, true, function(res) {
									let resdata = res.data;
									if (resdata.code == '0') {
										jewel.showToast(resdata.msg);
										that.loadNormal();
									} else if (resdata.code == 2) {
										uni.showModal({
											title: '提示',
											content: resdata.msg,
											success: function(res) {
												if (res.confirm) {
													that.cancel_consignation(order_id, 2);
												}
											}
										})
									} else {
										jewel.showToast(resdata.msg);
									}
								})
							}
						}
					})
				} else {
					jewel.post('order/cancel_consignation', {
						order_id: order_id,
						toast: 1
					}, true, function(res) {
						let resdata = res.data;
						jewel.showToast(resdata.msg);
						if (resdata.code == '0') {
							that.loadNormal();
						}
					})
				}
			
			},
			// 申请寄存
			consign_order(order_id, order_no){
				let that = this;
				uni.showActionSheet({
				    itemList: that.Consignation,
				    success: function (res) {
						let tapIndex = res.tapIndex;
						let consign_type = that.Consignation[tapIndex];
						uni.showModal({
							title: '提示',
							content: '确认要寄存该订单吗',
							success: function (res) {
								if (res.confirm) {
									jewel.post('order/consign_order', {order_id: order_id, consign_type: consign_type}, true, function (res){
										let resdata = res.data;
										jewel.showToast(resdata.msg);
										if(resdata.code == '0') {
											that.loadNormal();
											setTimeout(function (){
												console.log(order_no)
												uni.navigateTo({
													url: '/pages/jewel/agent_jewel/keep_detail?order_no=' + order_no
												})
											}, 1000);
										}
									})
								}
							}
						})
				    }
				});
			},
			consign_select(order_no){
				let that = this;
				uni.showActionSheet({
				    itemList: ['续期'],
				    success: function (res) {
						that.bIsShowLoading = true;
						hl.post('order/consign_renewal', {order_no: order_no, action: res.tapIndex}, true, function (res){
							that.bIsShowLoading = false;
						})
					//	that.loadNormal();
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			// 申请享退
			apply(order_id){
				uni.navigateTo({
					url: '/pages/jewel/order/order_apply?order_id=' + order_id
				})
			},
			// 查看寄存
			go_keep_detail(order_no) {
				uni.navigateTo({
					url: '/pages/jewel/agent_jewel/keep_detail?order_no=' + order_no
				})
			},
			// 取消订单，确认收货
			handle_order(order_id, type, url){
				let that = this;
				let text = type == 1 ? '确认要取消订单吗？': '确认已收到货了吗？';
				let sendurl = 'order/' + url;
				uni.showModal({
					title: '提示',
					content: text,
					success: function (res) {
						if (res.confirm) {
							uni.showLoading()
							jewel.post(sendurl, {order_id: order_id}, true, function (res){
								let resdata = res.data;
								setTimeout(function (){
									uni.hideLoading()
									jewel.showToast(resdata.msg)
									that.loadNormal();
								}, 1000);
							})
						}
					}
				})
			},
			baojia(order_no,baojia_tip){
				let that = this
				uni.showModal({
					title: '提示',
					content: baojia_tip,
					success: function (res) {
						if (res.confirm) {
							jewel.post('Order/baojiaBack',{order_no:order_no},true,function(res){
								jewel.showToast(res.data.msg);
								setTimeout(function (){
									that.loadNormal();
								}, 1000);
							})
						}
					}
				})
			},
			//下拉刷新
			onPulldownReresh(){
				this.page = 1
				this.totalPages = 1
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore(){
				this.page++;
				this.loadNewsList('add');
			},
			loadNormal(){
				this.page = 1;
				this.loadNewsList('normal');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable){
				if(this.enableScroll !== enable){
					this.enableScroll = enable;
				}
			},

			//获得元素的size
			getElSize(id) { 
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			}
		}
	}
</script>

<style lang='scss'>
	
	page, .content{
		background-color: #F5F5F5;
		height: 100%;
		overflow: hidden;
	}

	/* 顶部tabbar */
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 100rpx;
		white-space: nowrap;
		background-color: #fff;
		display: flex;
		.nav-item{
			display: inline-block;
			width: 150rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #333333;
			position: relative;
			flex: 1;
			&:after{
				content: '';
				width: 0;
				height: 4rpx;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		.on{
			color: #d71511;
		}
	}

	.swiper-box,.panel-scroll-box{
		height: 100%;
	}

	.order-list-box {
		width: 100%;
		overflow: hidden;
		margin-top: 75rpx;
		.order-list {
			width: 100%;
			background: #fff;
			margin: 0 auto;
			position: relative;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding-top: 0;
			.order-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				color: #4d4d4d;
				font-size: 28rpx;
				padding: 0 25rpx;
				.order-create-time{
					width: 520rpx;
				}
			}
		}
		&:first-child{
			margin-top: 20rpx;
		}
	}
	

	.good {
		overflow: hidden;
		display: flex;
		align-items: flex-start;
		padding: 20rpx 25rpx;
		background-color: #f5f5f5;
	}
	
	.lease-img {
		width: 134rpx;
		height: 134rpx;
		margin-right: 20rpx;
		image {
			width: 100%;
			height: 100%
		}
	}
	
	.lease-info {
		flex: 1;
		.lease-title {
			max-height: 84rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #202020;
		}
		.lease-attr {
			max-height: 68rpx;
			overflow: hidden;
			font-size: 26rpx;
			margin-top: 10rpx;
			line-height: 34rpx;
		}
		.lease-price {
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.lease-now {
				color: #202020;
				font-size: 32rpx;
			}
			.lease-num {
				color: #616161;
				font-size: 30rpx;
			}
		}
	}
	
	
	.total-cont{
		font-size: 28rpx;
		color: #1b1b1b;
		text-align: left;
		padding: 14rpx 25rpx;
		text{
			font-size: 34rpx;
			padding-right: 35rpx;
		}
	}
	
	.buyer-info{
		padding: 0 25rpx;
		padding-bottom: 15rpx;
		&-item{
			display: flex;
			align-items: center;
			padding: 10rpx 0;
			&-icon{
				width: 47rpx;
				height: 47rpx;
				display: block;
				margin-left: 6rpx;
				margin-right: 32rpx;
			}
			&-text{
				width: 605rpx;
				line-height: 35rpx;
				font-size: 30rpx;
				color: #1b1b1b;
				&-btn{
					color: #d71511;
					font-size: 30rpx;
					border: 1px solid #d71511;
					border-radius: 10rpx;
					min-width: 146rpx;
					text-align: center;
					line-height: 52rpx;
				}
			}
			&-tel{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>
